<template>
  <div>
    <!--    头部-->
    <ConTitle :info="topTitle"/>
    <div class="device">
      <Device class="de-left"></Device>
    </div>
    <!-- 渲染列表数据 -->
    <div v-for="(value, key) in sensorList" :key="key">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{key}}</span>
        </div>
        <ul class="list-con">
          <li v-for="item in value" :key="item.eui">
            <i class="iconfont icon-yalichuanganqi chuanganqi" style="font-size: 30px;color: #91a8bf;transform: rotate(180deg);" v-show="item.online==false"></i>
            <i class="iconfont icon-yalichuanganqi chuanganqi" style="font-size: 30px;color: greenyellow;transform: rotate(180deg);" v-show="item.online==true"></i>
            <div class="item1">{{item.devValue}}</div>
            <div class="item2">{{item.devName}}</div>
            <div class="item3">EUI:{{item.eui}}</div>
          </li>
        </ul>
      </el-card>
    </div>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import Device from "./components/Device";
import { $deviceSensorList } from "@/api/index.js";
export default {
  name: "dashboarddata",
  data() {
    return {
      topTitle: {
        type: "",
        text: "设备列表",
        msg: "监控所有设备状态。",
      },
      sensorList:[],
    };
  },
  components: {
    ConTitle,
    Device,
  },
  created() {
    $deviceSensorList().then((res)=>{
      console.log(res);
      this.sensorList=res.data.data;
    });
  },
};
</script>

<style scoped lang="scss">
.device>div{
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

ul{display: flex;
  flex-wrap: wrap;
  li{
    display: inline-block;
    width: 215px;
    text-align: center;
    border: 1px solid #f3f4f5;
    margin-left: 20px;
    margin-bottom: 10px;
  }
  .item1{
    padding-top: 10px;
  }
  .item1,.item2{
    font-weight: bold;
    padding-bottom: 10px;
  }
  .item3{
    background: #f3f4f5;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
</style>